<template>
	<view>
	<view class="login-img">
		<view class="owl-login" >
			
		</view>
	</view>
		
		<view class="login-form">
			<form @submit="formSubmit">
				<view class="form-input">
					<input type="text" maxlength="7" v-model="name" placeholder="昵称" />
				</view>
				<view class="form-input">
					<input  type="text" maxlength="15" v-model="account" placeholder="皮皮号" />
				</view>
				<view class="form-input">
					<input type="password" maxlength="20" v-model="password" placeholder="密码" @focus="passwordF_B" @blur="passwordF_B" />
				</view>
				<view class="form-input">
					<input type="password" maxlength="20" v-model="verifyPassword" placeholder="确认密码" @focus="passwordF_B" @blur="passwordF_B" />
				</view>
				<button type="primary" :disabled="account == '' || password == '' || name == '' || verifyPassword == ''?true:false" @click="submit()">注册</button>
			</form>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		onLoad() {
			_self = this
		},
		data() {
			return {
				hideEyes: false,
				account: '',
				password: '',
				name:'',
				verifyPassword:''
			}
		},
		methods: {
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			formSubmit(e) {
				console.log(e.detail.value);
			},
			submit(){
				console.log("注册")
				
				if(!_self.$u.test.enOrNum(_self.account)){
					_self.toast("皮皮号只能是数字与字母组合哦!")
				}else if(_self.password != _self.verifyPassword){
					_self.toast("两次密码不一致!")
				}else if(!_self.$u.test.enOrNum(_self.password)){
					_self.toast("密码只能是数字与字母组合哦!")
				}else{
					uni.showLoading({
					    title: '注册中'
					});
					
					_self.xhttp.request({
						url: "/user/register", //仅为示例，并非真实接口地址。
						method:"POST",
						data: {
					        name:_self.name,
							account:_self.account,
							password:_self.password
						},
						header:{
							'Content-Type':'application/json'
						}
					}).then(res => {
						if(res.data.code == 200){
							_self.toast("注册成功,请登录")
							_self.navto('/pages/index/login')
							}
						uni.hideLoading(); 
					}).catch(err => {
						uni.hideLoading(); 
					})
				
					
				}
			}
		}
	}
</script>

<style>
	.login-form {
		margin: -9px 10px 0 10px;
		height: auto;
		background: #007AFF; 
		border-radius: 10px;
		background-color: #EEEEEE;
		box-shadow: 0 2px 10px #9B9B9B;
		padding: 20px;
	}

	.form-input input {
		background: #ffffff;
		border-radius: 5px;
		height: 40px;
		margin: 20px 0;
		padding: 0 10px;
	}

	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		margin-top: 100upx;
	}

	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
	}


</style>
